<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="jquery.source.js"></script>
    <style>
        #colors{width: 300px; height: 500px;}
        .colorBlock{width: 15px; height: 15px; display: inline-block; border-radius: 10px; margin: 5px;}
    </style>
</head>
<body>
<button id="clickMe" onclick="testColorSorter();">Click me</button>
<div id="colors"></div>
<script>


    function testColorSorter() {
        makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
        makeSortable();
    }



    $(document).ready(function() {
        makeColorSorter(.05, .05, .05, 0, 2, 4, 128, 127, 121);
        makeSortable();
    });


    function decimalToHex(d) {
        var hex = Number(d).toString(16);
        hex = "00".substr(0, 2 - hex.length) + hex;

        console.log('converting ' + d + ' to ' + hex);
        return hex;
    }



   /* function decimalToHex(d) {
        var hex = Number(d).toString(16);
        return hex.length === 1 ? '0' + hex : hex;
    }*/


    function makeColorSorter(frequency1, frequency2, frequency3,
                             phase1, phase2, phase3,
                             center, width, len) {

        for (var i = 0; i < len; ++i)
        {
            var red = Math.floor(Math.sin(frequency1 * i + phase1) * width + center);
            var green = Math.floor(Math.sin(frequency2 * i + phase2) * width + center);
            var blue = Math.floor(Math.sin(frequency3 * i + phase3) * width + center);

            var div = $('<div class="colorBlock"></div>');
            div.css('background-color', '#' + decimalToHex(red) + decimalToHex(green) + decimalToHex(blue));
            $('#colors').append(div);

        }
    }


    function makeSortable() {
        
    }



</script>
</body>
</html>